<template>
    <div>

      <van-row>
        <van-col span="24">

          <div style="padding: 0.5rem 0rem 0rem 0rem"></div>
          <div class="wrapper">
            <div
              class="material-list-grid"
              v-for="(list,index) in listAll"
            >
<!--              <van-row @click="toDetails(list.constructionStrategyId)">-->
<!--                <van-col>-->
<!--                  <iframe onclick="toDetails(list.constructionStrategyId)" style="width:100%;height:500%;" src="http://39.98.237.139/profile/video/2021/03/28/9cd7729c-6957-409a-96f3-6898bd1e71a1.mp4" frameborder="0" scrolling="no" id="bdIframe">-->
<!--                  </iframe>-->
<!--                </van-col>-->

<!--              </van-row>-->

<!--                  <div class="bg-video">-->
<!--                    <video class="v1"  autoplay muted loop>-->
<!--                      <source src="http://39.98.237.139/profile/video/2021/03/28/9cd7729c-6957-409a-96f3-6898bd1e71a1.mp4" type="video/mp4"/>-->
<!--                    </video>-->
<!--                  </div>-->

              <van-image
                round
                style="border-radius:10px;"
                width="10rem"
                height="10rem"
                fit="cover"
                :src="list.strategyZhutuUrl"
                @click="toDetails(list.constructionStrategyId)"
              />
              <div class="material-list-grid-content">
                <div
                  align="left"
                  style="border-radius: 0.5rem;box-shadow:0 8px 12px #ebedf0"
                >


                  <div>
                    <!--<span style="font-size: 5px;margin: 0rem 0.5rem 0rem 0.5rem">{{list.strategyHabitable}}居&nbsp;|&nbsp;{{list.price}}万&nbsp;|&nbsp;{{list.strategyStyle}}</span>-->
                  </div>
                  <div style="margin-top: 0.5rem">
                    <p style="width: 9rem;font-size: 13px;font-weight:550;margin: 0rem 0.5rem 0rem 0.5rem">{{list.strategyTheme}}</p>
                  </div>
                  <div>
                    <van-image
                      style="float: left;margin-top: 0.25rem;margin-left: 0.5rem"
                      round
                      width="1rem"
                      height="1rem"
                      fit="cover"
                      :src="list.supplierPic"
                    />
                    <p style="margin:5px 0;padding: 0;height: 1.5rem;line-height: 1.55rem">{{list.shopsName}}</p>

                  </div>
                </div>
              </div>
            </div>
          </div>

        </van-col>
        <!--        <van-col span="12">-->
        <!--          aa-->


        <!--        </van-col>-->
      </van-row>


    </div>
</template>

<script>
  import { findAllZhengWu,findAllShiPin } from "@/api/commodity/strategy";
    export default {
        name: "strategy_pic",
      data(){
          return{
            listAll:[],
          }
      },


      created() {
        this.getList();
      },
      methods:{
        getList(){
          findAllShiPin().then(res=>{
            this.listAll = res.data
          })
        },

        toDetails(list){
          this.$router.push({ path:'/strategy_shipin',query:{constructionStrategyId:list}})
        }

      }
    }
</script>

<style scoped>
  .sousuo{
    margin: 0.5em 0px 0px 0px;
    border-radius: 15px;
  }

  .banner_wrapper {
    width: 100%;
    height: 40vw;
    overflow: hidden;
  }
  .banner_wrapper img {
    transform: translateY(-15%);
  }
  .index_list {
    padding-bottom: 60px;
    height: calc(100*10);
  }
  .main{
    padding: 0vw 4vw;
  }


  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }


  .shop-name {
    font-size: 12px;
    padding-bottom: 5px;
    text-align: left;
  }

  .van-tag {
    padding-left: 5px;
    padding-right: 5px;
  }

  .zx-box {
    display: flex;
    align-items: center;
  }

  .index_item {
    margin-top: 5.333vw;
    margin-bottom: 8vw;
  }
  .wrapper {
    display: inline-block;

  }

  .info1 {
    display: flex;
    margin-top: 2.2vw;
  }
  .info1 p {
    font-size: 3.733vw;
    height: 4.4vw;
    line-height: 4.4vw;
    margin-right: 1.6vw;
    color: #777777;
  }
  .info1 .distance {
    font-size: 3.2vw;
    color: #000;
  }
  .info1 .i {
    font-size: 4.4vw;
  }
  .title {
    margin: 2.2vw 0vw;
    color: #333;
  }
  .content {
    text-align: left;
  }

  .material-list-grid {
    display: inline-block;
    padding: 0.13rem;
    margin-bottom: 5vw;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 5vw;
  }
  .material-list-grid P,
  span {
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
</style>
